<template>
  <div class="container">
    <img
      class="shareBgi"
      src="https://com-jiaozheng-oss.oss-cn-qingdao.aliyuncs.com/minipro/%E5%9B%BE%E5%B1%82-1.png"
      alt=""
    >
    <span class="myBonus">我的奖金</span>
    <div class="shareInfo">
      <div class="shareAccount">
        <span><span class="shareNumber">568</span>元</span>
        <span>累计获得</span>
      </div>
      <div class="leftB">|</div>
      <div class="shareAccount">
        <span><span class="shareNumber">568</span>元</span>
        <span>奖金在路上</span>
      </div>
      <div class="leftB">|</div>
      <div class="shareAccount">
        <span><span class="shareNumber">568</span>人</span>
        <span>成功邀请</span>
      </div>
    </div>
    <button
      class="shareBtn"
      open-type='share'
    >立即分享</button>
  </div>
</template>

<script>
export default {
	data() {
		return {}
	},
	methods: {},
	/**
	 * 分享
	 */
	onShareAppMessage(ops) {},
}
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100vh;
	position: relative;
	.shareBgi {
		width: 100%;
		height: 100vh;
	}
	.myBonus {
		font-size: 16px;
		color: #f0490b;
		position: absolute;
		font-weight: 600;
	}
	.shareInfo {
		width: 663rpx;
		height: 190rpx;
		position: absolute;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		.leftB {
			color: rgba(204, 204, 204, 0.5);
		}
		.shareAccount {
			width: 200rpx;
			height: 150rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			.shareNumber {
				font-size: 18px;
				display: inline-block;
				margin-left: 4px;
				margin-bottom: 8px;
			}
		}
	}
	.shareBtn {
		width: 95%;
		height: 45px;
		background: url('https://com-jiaozheng-oss.oss-cn-qingdao.aliyuncs.com/minipro/%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2-2.png')
			no-repeat center;
		background-size: 100% 100%;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 30px;
		margin: auto;
		color: #6f0c00;
		text-align: center;
		line-height: 45px;
		border: none;
		outline: none;
		border-radius: 100px;
	}
	@media screen and(max-width: 375px) {
		.myBonus {
			top: 636rpx;
			left: 66rpx;
		}
	}
	@media screen and(max-width: 414px) {
		.myBonus {
			top: 647rpx;
			left: 66rpx;
		}
		.shareInfo {
			width: 663rpx;
			height: 190rpx;
			position: absolute;
			bottom: 300rpx;
			left: 47rpx;
		}
	}
	@media screen and(min-width: 414px) {
		.myBonus {
			top: 656rpx;
			left: 66rpx;
		}
		.shareInfo {
			width: 663rpx;
			height: 190rpx;
			position: absolute;
			bottom: 300rpx;
			left: 45rpx;
		}
	}
}
</style>